<template>
    <div>
        <h1>智慧社区管理系统修改</h1>
        <table border="">
            <tr>
                <td>账号</td>
                <td><input type="text" v-model="state.mzhanghao"></td>
            </tr>
            <tr>
                <td>密码</td>
                <td><input type="password" v-model="state.mpwd"></td>
            </tr>
            <tr>
                <td>姓名</td>
                <td><input type="text" v-model="state.mname"></td>
            </tr>
            <tr>
                <td>电话</td>
                <td><input type="text" v-model="state.mphone"></td>
            </tr>
            <tr>
                <td>名称</td>
                <td><input type="text" v-model="state.mnames"></td>
            </tr>
            <tr>
                <td>图片</td>
                <td>
                    <input type="file" @change="chuan">
                    <img :src="src" alt="" width="50px" height="50px"  v-if="src != ''">
                </td>
            </tr>
            <tr>
                <td>类型</td>
                <td>
                    <select v-model="state.mleix">
                        <option value="">请选择</option>
                        <option value="1">已完成</option>
                        <option value="2">未完成</option>
                    </select>
                </td>
            </tr>
            <tr>
                <td>时间</td>
                <td>
                    <input type="date" v-model="state.mdate">
                </td>
            </tr>
            <tr>
                <td>
                    <input type="button" value="修改" @click="add">
                </td>
                <td></td>
            </tr>
        </table>
    </div>
</template>

<script setup lang="ts">
import { reactive, onMounted, toRefs } from 'vue'
import { useRouter, useRoute } from 'vue-router'
import axios from 'axios'
const router = useRouter()
const route = useRoute()
const data = reactive({
    state: {
        mid: '',
        mzhanghao: '',
        mpwd: '',
        mname: '',
        mphone: '',
        mnames: '',
        image: '',
        mleix: '',
        mdate: '',

    },
    src: '',

})

const { state, src } = toRefs(data)

const chuan = (e: any) => {
    let file = e.target.files[0]
    let from = new FormData()
    from.append('file', file)
    axios({
        url: 'https://localhost:7046/api/image/shangchuan',
        method: 'post',
        data: from
    }).then(res => {
        state.value.image = res.data.data
        src.value = res.data.data
    })
       
}
onMounted(() => {
    xiumems()
})
const xiumems = () => {
    axios({
        url: 'https://localhost:7046/api/Member/fanMember',
        method: 'get',
        params: {
            mid: route.query.mid
        }
    }).then(res => {
        state.value = res.data.data
        src.value = res.data.data.image
    })
}

const add = () => {
    if(state.value.mzhanghao == ''){
        alert('账号不能为空')
        return
    }
    if(state.value.mzhanghao.length > 4){
        alert('账号必须是小写英文字母4-16位')
        return
    }
    if(state.value.mpwd == ''){
        alert('密码不能为空')
        return
    }
    if(state.value.mname == ''){
        alert('姓名不能为空')
        return
    }
    if(state.value.mphone == ''){
        alert('电话不能为空')
        return
    }
    if(state.value.mnames == ''){
        alert('名称不能为空')
        return
    }
    if(state.value.mnames.length > 2){
        alert('名称长度在2-20之间')
        return
    }
    if(state.value.image == ''){
        alert('头像不能为空')
        return
    }
   
    axios({
        url: 'https://localhost:7046/api/Member/xiuMember',
        method: 'put',
        data: state.value
    })
        .then(res => {
            if (res.data.data > 0) {
                alert('修改成功')
                router.push('/Membershow')
               
            }
            else {
                alert('修改失败')
            }
        })
}





</script>

<style scoped></style>